<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        FirstName:
        <input type="text" v-model="firstName">
        <br>
        <br> LastName:
        <input type="text" v-model="lastName">
        <br>
        <br> FullName:
        <input type="text" v-model="fullName">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstName: "",
                lastName: ""
            },
            computed: {

                // 简写形式: 如果只需要做单向绑定给视图提供数据，那么简写形式足够了
                // fullName(){
                //     return this.firstName + '·' + this.lastName;
                // }

                // 完整的形态： 如果说不仅要给视图提供数据，而且要在视图改变的时候，执行某些操作，那么这个时候就需要用到完整形态了
                fullName: {
                    //get方法其实就是给视图提供数据用的
                    get() {
                        //当要获取这个计算属性的值的时候，就会调用get方法
                        //get方法的返回值，就是最终获取到的属性值
                        console.log("计算属性的get方法被调用功能了")
                        return this.firstName + '·' + this.lastName;
                        
                    },
                    //set方法就是视图改变的时候，vue会自动调用这个方法
                    //你想在视图中数据改变的时候，做什么事儿，直接放在set中就可以了
                    set(value) {
                        // 把value也就是当前input标签中的内容拆分开
                        // 分别给firstname和lastname
                        var names = value.split("·");
                        this.firstName = names[0];
                        this.lastName = names[1];

                        console.log("计算属性的set方法被调用功能了", value)
                    }
                }
            }
        })
    </script>
</body>

</html>